<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxz">
    <title>jQuery选择器练习</title>
    <style>
    </style>
</head>
<body>
    <div id="test-jquery">
        <p id="para-1" class="color-red">JavaScript</p>
        <p id="para-2" class="color-green">Haskell</p>
        <p class="color-red color-green">Erlang</p>
        <p name="name" class="color-black text">Python</p>
        <form class="test-form" target="_blank" action="#0" onsubmit="return false;">
            <legend>注册新用户</legend>
            <fieldset>
                <p><label>名字:<input name="name"></label></p>
                <p><label>邮件:<input name="email"></label></p>
                <p><label>口令:<input name="password" type="password" class="text"></label></p>
                <p><button type="submit">注册</button></p>
            </fieldset>
        </form>
    </div>
</body>
</html>
<script src="js/jquery.js"></script>
<script type="text/javascript">
  /*练习:使用jQuery选择器分别选出指定元素:
    仅选择JavaScript
    仅选择Erlang
    同时选择JavaScript和Erlang
    选择所有 <p>
    选择名字为name的input
    同时选择名字为email和name的input
	*/
    $('#test-jquery p.color-red').css('backgroundColor','red')
    $('#test-jquery p:contains(Erlang)').css('backgroundColor', 'green')
    $('#test-jquery #para-1, .color-red.color-green').css('color', 'yellow')
    $('#test-jquery p').css('font-size', '25px')
    $('p label :input').css('border', '1px solid red')
    $('p label  input[name="email"], input[name="name"]').css('width', '500px')


    

    
   
</script>